<template>
  <view class="city-picker" v-if="show">
    <view class="mask" @click="$emit('close')"></view>
    <view class="picker-content">
      <!-- 顶部搜索栏 -->
      <view class="search-bar">
        <input
          type="text"
          v-model="searchKey"
          placeholder="搜索城市"
          @input="onSearch"
        />
      </view>

      <!-- 定位城市 -->
      <view class="section" v-if="!searchKey">
        <view class="section-title">当前定位</view>
        <view class="city-item current" @click="selectCity(currentCity)">
          <text class="location-icon">📍</text>
          <text>{{currentCity.name}}</text>
        </view>
      </view>

      <!-- 历史记录 -->
      <view class="section" v-if="!searchKey && historyCities.length">
        <view class="section-title">
          历史记录
          <text class="clear-btn" @click="clearHistory">清除</text>
        </view>
        <view class="city-list">
          <view
            class="city-item"
            v-for="city in historyCities"
            :key="city.id"
            @click="selectCity(city)"
          >
            {{city.name}}
          </view>
        </view>
      </view>

      <!-- 热门城市 -->
      <view class="section" v-if="!searchKey">
        <view class="section-title">热门城市</view>
        <view class="city-list">
          <view
            class="city-item"
            v-for="city in hotCities"
            :key="city.id"
            @click="selectCity(city)"
          >
            {{city.name}}
          </view>
        </view>
      </view>

      <!-- 搜索结果 -->
      <view class="section" v-if="searchKey">
        <view class="city-list">
          <view
            class="city-item"
            v-for="city in searchResults"
            :key="city.id"
            @click="selectCity(city)"
          >
            {{city.name}}
          </view>
        </view>
        <view class="no-result" v-if="searchResults.length === 0">
          未找到相关城市
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, computed } from 'vue'
import { saveToHistory, getHistoryCities, clearHistoryCities } from '@/utils/cityStorage'

export default {
  name: 'CityPicker',
  props: {
    show: Boolean,
    currentCity: {
      type: Object,
      default: () => ({
        id: 'current',
        name: '定位中...',
        latitude: 0,
        longitude: 0
      })
    }
  },

  emits: ['close', 'select'],

  setup(props, { emit }) {
    const searchKey = ref('')
    const historyCities = ref(getHistoryCities())

    // 热门城市列表
    const hotCities = [
      { id: 'beijing', name: '北京', latitude: 39.9042, longitude: 116.4074 },
      { id: 'shanghai', name: '上海', latitude: 31.2304, longitude: 121.4737 },
      { id: 'guangzhou', name: '广州', latitude: 23.1291, longitude: 113.2644 },
      { id: 'shenzhen', name: '深圳', latitude: 22.5431, longitude: 114.0579 },
      { id: 'hangzhou', name: '杭州', latitude: 30.2741, longitude: 120.1551 },
      { id: 'chengdu', name: '成都', latitude: 30.5728, longitude: 104.0668 },
      { id: 'nanjing', name: '南京', latitude: 32.0603, longitude: 118.7969 },
      { id: 'wuhan', name: '武汉', latitude: 30.5928, longitude: 114.3055 }
    ]

    // 搜索结果
    const searchResults = computed(() => {
      if (!searchKey.value) return []
      return hotCities.filter(city =>
        city.name.toLowerCase().includes(searchKey.value.toLowerCase())
      )
    })

    // 选择城市
    const selectCity = (city) => {
      saveToHistory(city)
      historyCities.value = getHistoryCities()
      emit('select', city)
      emit('close')
    }

    // 清除历史记录
    const clearHistory = () => {
      clearHistoryCities()
      historyCities.value = []
    }

    // 搜索处理
    const onSearch = () => {
      // 这里可以调用城市搜索API
      // 现在使用本地过滤模拟
    }

    return {
      searchKey,
      historyCities,
      hotCities,
      searchResults,
      selectCity,
      clearHistory,
      onSearch
    }
  }
}
</script>

<style lang="scss">
.city-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .picker-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;

    .search-bar {
      margin-bottom: 20px;

      input {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        background: #f5f5f5;
        padding: 0 15px;
        font-size: 14px;
      }
    }

    .section {
      margin-bottom: 20px;

      .section-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .clear-btn {
          color: #999;
          font-size: 12px;
        }
      }

      .city-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .city-item {
        padding: 8px 15px;
        background: #f5f5f5;
        border-radius: 15px;
        font-size: 14px;
        color: #333;

        &.current {
          background: #e6f7ff;
          color: #1890ff;
          display: flex;
          align-items: center;
          gap: 5px;
        }

        &:active {
          opacity: 0.7;
        }
      }

      .no-result {
        text-align: center;
        color: #999;
        padding: 20px 0;
      }
    }
  }
}
</style>